<template>
  <div id="kanban">
    <div class="kanban_header">
      <div v-for="(item, index) in list_data" :key="item.image" class="kanban_header_item" 
      @click="setTab(index)" :class="{'active':cur_index == index}"> 
        <div>
          <countTo  v-if="item.num >= 0" :startVal='startNum' :endVal='item.num' :duration='600' class="num"></countTo>
          <p class="title" v-else-if="item.name">{{item.name}}</p>
          <p class="title" v-else-if="item.title">{{item.title}}</p>
          <p class="category">{{item.category}}</p>
        </div>
        <el-image :src="item.image"></el-image>
      </div>
    </div>
    <div v-show="cur_index==0" class="kanban_views views">
      <viewsTrend class="views_left" :show="cur_index == 0" ></viewsTrend>
      <viewsVisit class="views_right" :show="cur_index == 0" ></viewsVisit>
    </div>

    <div  v-show="cur_index==1" class="kanban_warranty">
      <div class="views">
        <warrantyVisit class="views_left" :show="cur_index==1" ></warrantyVisit>
        <warrantyTime class="views_right" :show="cur_index==1" ></warrantyTime>
      </div>
      <div class="views">
        <warrantyTrans class="views_left" :show="cur_index==1" ></warrantyTrans>
        <warrantySale class="views_right" :show="cur_index==1" ></warrantySale>
      </div>
    </div>
    <!-- <div  v-show="cur_index==2" class="kanban_betaTester">
      <div class="views">
        <betatesterVisit class="views_left" :show="cur_index==2" ></betatesterVisit>
        <betatesterTime class="views_right" :show="cur_index==2" ></betatesterTime>
      </div>
      <div class="views">
        <betatesterTrans class="views_left" :show="cur_index==2" ></betatesterTrans>
        <betatesterTransWB class="views_right" :show="cur_index==2" ></betatesterTransWB>
      </div>
    </div> -->
     <div  v-show="cur_index==2" class="kanban_product">
      <div class="views">
        <div class="views_left"> 
          <productVisit class="views_left_top" :show="cur_index==2" ></productVisit>
          <productTrans class="views_left_bottom" :show="cur_index==2" ></productTrans>
        </div>
        <productShare class="views_right" :show="cur_index==2"></productShare>
      </div>
    </div>
    <div  v-show="cur_index==3" class="kanban_article">
      <div class="views">
        <div class="views_left">
          <articleVisit class="views_left_top" :show="cur_index==3" ></articleVisit>
          <articleTrans class="views_left_bottom" :show="cur_index == 3" ></articleTrans>
        </div>
        <articleShare class="views_right" :show="cur_index === 3"></articleShare>
      </div>
    </div>
  </div>
</template>

<script>

import { viewsTrend, viewsVisit,
  warrantyVisit, warrantyTime, warrantyTrans, warrantySale,
  // betatesterVisit, betatesterTime, betatesterTrans, betatesterTransWB,
  productVisit, productTrans, productShare, articleVisit, articleTrans, articleShare, } from './components'

import { allData } from '@/api/kanban/index.js'
import countTo from 'vue-count-to';
export default {
  name: 'kanban',
  data () {
    return {
      startNum: 0,
      cur_index : 0, //当前在哪个tab下
      list_data: [
        {
          category: '今日浏览量',
          num: 0,
          image: require('@/assets/kanban/Views.svg')
        },
        {
          category: 'Warranty注册用户',
          num: 0,
          image: require('@/assets/kanban/Warranty.svg')
        },
        // {
        //   category: 'Beta Tester注册用户',
        //   num: 0,
        //   image: require('@/assets/kanban/BetaTester.svg')
        // },
        {
          category: '产品分析',
          name: '暂无',
          image: require('@/assets/kanban/Product.svg')
        },
         {
          category: '文章分析',
          title: '暂无',
          image: require('@/assets/kanban/Article.svg')
        },
      ]
    }
  },


  components: { 
    viewsTrend, viewsVisit, countTo, 
    warrantyVisit, warrantyTime, warrantyTrans, warrantySale,
    // betatesterVisit, betatesterTime, betatesterTrans, betatesterTransWB,
    productVisit, productTrans, productShare,
    articleVisit, articleTrans, articleShare,
  },
  mounted () {},
  created () {
    this.getAllData()
  },
  computed: {
    isWin() {
      return (navigator.platform == "Win32") || (navigator.platform == "Windows")
    }
  },
  methods: {
    setTab (index) { // 选择对应模块
      this.cur_index = index
      this.getAllData()
      document.getElementById('kanban').scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    getAllData(){
      allData().then(res=>{
        let data = res.data
        this.list_data[0].num = parseInt(data.today_page_views)
        this.list_data[1].num = parseInt(data.warranty_registered_users_num)
        // this.list_data[2].num = parseInt(data.beta_tester_registered_users_num)
        this.list_data[2].name = data.hot_product
        this.list_data[3].title = data.hot_article
      })
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/kanban/kanban.scss';
#kanban {
  overflow: auto;
}
</style>